import React from 'react'
import './stationList.scss'
import './stationItem.scss'
import pull from '../../static/pull.png'
import place from '../../static/place.png'
import StationItem from './stationItem'
import push from '../../static/push.png'
import place2 from '../../static/place2.png'
import Map from '../map/map'
import position from '../../static/daohangjiant.png'
import {fmtDistance} from "../../utils/maths"

import {
  getStoreListByCouponId
} from '../../utils/interface'
import { getUrlParam } from '../../utils/tools'
import { divide } from '../../utils/maths'
import Loading from '../../comm/loading'


class CouponStationList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      tabState: 0,
      storeList: [],
      oilList: [],
      act_index: 0,
      defaultOil: '',
      distanceSort: 1,
      defaultDistance: '',
      productInfoId: '',
      productId: '',
      loadingState: false,
    }
  }
  render() {
    return (
      <div className="mapBox">
        <Loading loadingState={this.state.loadingState} />
        <div className="list" style={{top:"0"}}>
          {this.state.storeList.map((item) => (
            <div className="station"  key={item.id}>
        
              <div className="station-top">
                        <p className="station-title">{item.name}</p>
                        <div className="station-distance-info" onClick={this.goMap.bind(this,item)}>
                            <p style={{color:"#5088FF"}}>{fmtDistance(item.distance)} |</p>
                            <p style={{color:"#5088FF"}}><img src={position} alt="" />路线</p>
                        </div>
                    </div>
                    <div className="station-bottom">
                        <div className="station-money-info">
                            <p className="price">{item.plateformPrice}
                                <span>元/升起</span>
                            </p>
                            {item.cutPrice > 0?<p className="subsidy">补贴{item.cutPrice}元/升</p> : ""}
                            { item.productInfoStoreDTOList[0].activityKind===1? <p className="subsidy">最低</p> : ""}

                        </div>
                        
                    </div>
            </div>
          ))}
        </div>
      </div>
    )
  }
  goMap(e){
    window.wx.miniProgram.navigateTo({
      url: '/pages/map/map?lat='+Number(e.lat)+'&lot='+Number(e.lot),
    })
  }
  async componentDidMount() {
    this.setState({
      loadingState:true
    })
    document.title = '更多站点'
    let res = await getStoreListByCouponId({
      memberId:getUrlParam("memberId"),
      lat:Number(getUrlParam("lat")),
      lot:Number(getUrlParam("lot")),
      couponId:getUrlParam("couponId"),
      orderSource:1,
      sortFlag:"distance",
      productInfoId:"54"
    })    
    res.data.result.map( item => {
      item.plateformPrice = item.plateformPrice&&divide(item.plateformPrice,100)
      item.cutPrice = item.cutPrice&&divide(item.cutPrice,100)
      
    })
    this.setState({
      storeList:res.data.result,
      loadingState:false
    })
  
    console.log(res.data.result)
  }
}
export default CouponStationList
